<template>
  <main class="menu">
    <section class="logo" :style="{ width: isCollapse ? '6.4rem' : '22rem' }">
      <div class="icon" @click="handleMenu">
        <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
      </div>
      <div class="menu-dir">
        <i class="el-icon-edit-outline" style=""></i>
        <h1 v-show="!isCollapse">通用工时系统</h1>
      </div>
    </section>
    <el-menu
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#001529"
      text-color="#fff"
      :router="true"
      active-text-color="#ffd04b"
      :default-active="activeIndex"
    >
      <el-menu-item index="/workingfill">
        <i class="el-icon-edit"></i>
        <span slot="title">工时填报</span>
      </el-menu-item>
      <el-menu-item index="/workingsee">
        <i class="el-icon-view"></i>
        <span slot="title">工时查看</span>
      </el-menu-item>
      <el-menu-item index="/workingreview">
        <i class="el-icon-edit-outline"></i>
        <span slot="title">工时审核</span>
      </el-menu-item>
    </el-menu>
  </main>
</template>

<script>
export default {
  name: 'HMenu',
  data () {
    return {
      // isCollapse: true
    };
  },
  props: ["isCollapse"],
  methods: {
    handleMenu (e) {
      console.log(e)
      this.$emit("update:isCollapse", !this.isCollapse);
    }
  },
  computed: {
    // 我们使用计算属性来获取到当前点击的菜单的路由路径，然后设置default-active中的值
    // 使得菜单在载入时就能对应高亮
    activeIndex () {
      const route = this.$route;
      const { meta, path } = route;
      // 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    }
  }
}
</script>

<style lang="scss" scoped>
.menu {
  .logo {
    height: 5rem;
    background: #00203f;
    transition: width 0.28s linear;
    position: relative;
    .icon {
      display: inline-block;
      font-size: 2.5rem;
      font-weight: 400;
      position: absolute;
      right: -4rem;
      top: 0.8rem;
      z-index: 1;
    }
  }
  .menu-dir {
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 3rem;
      font-weight: 100;
      color: #00f0d8;
    }
    h1 {
      color: #fff;
      font-size: 1.6rem !important;
      font-family: fangsong, Avenir, Helvetica Neue, Arial, Helvetica,
        sans-serif !important;
      font-weight: 600;
      vertical-align: middle;
      margin-left: 1.5rem;
    }
  }
  .is-active {
    // 选中效果
    color: #fff !important;
    background-color: #078bff !important;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 22rem;
  min-height: calc(100vh - 5rem);
}
.el-menu-vertical-demo {
  min-height: calc(100vh - 5rem);
}
.el-menu-item {
  height: 5rem !important;
  line-height: 5rem !important;
  color: #888 !important;
}
.el-submenu__title {
  height: 5rem;
  line-height: 5rem;
}
</style>